<template>
  <div>
    <!-- 版本记录 -->
    <a-modal
      :z-index="800"
      :footer="null"
      width="100%"
      cancel-text="关闭"
      wrap-class-name="full-modal"
      :visible="visible"
      :forceRender="true"
      :maskClosable="false"
      title="版本记录"
      :body-style="{ paddingBottom: '8px' }"
      @update:visible="updateVisible"
      @close="updateVisible(false)"
    >
      <a-card :bordered="false" class="table-height">
        <BasicTable
          :canResize="false"
          ref="tableRef"
          :api="ModelMgmtApi.findUpdateRecords"
          :where="where"
          :columns="columns"
          showTableSetting
          rowKey="id"
          :pagination="false"
          :rowSelection="{
            type: 'checkbox',
            selectedRowKeys: checkedKeys,
            onChange: onSelectChange,
          }"
        >
          <!-- table上边工具栏 -->
          <template #toolbar>
            <div class="table-toolbar">
              <a-space>
                <a-button type="primary" @click="onNew2">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  <span>上传新版本</span>
                </a-button>
              </a-space>
            </div>
          </template>

          <template #bodyCell="{ column, record }">
            <!-- 图片预览 -->
            <template v-if="column.dataIndex === 'thumbnailPreview'">
              <a-image :width="60" :src="WEB_VIEWER_URL_BASE + '/assets/models/' + record.path + '/offscreen.png'" />
            </template>

            <!-- table操作栏按钮 -->
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="onPreview(record)">预览</a>
                <a-divider type="vertical" />
                <a @click="onDetail2(record)">详情</a>
                <a-divider type="vertical" />
                <a @click="handleClick(record.id)">日志</a>
                <a-divider type="vertical" />
                <a class="digital-text-danger" @click="onEditNewVersionPreview(record)">编辑新版本</a>

              </a-space>
            </template>
          </template>
        </BasicTable>
      </a-card>

      <template #footer>
        <a-button type="primary" @click="updateVisible(false)">关闭</a-button>
      </template>
    </a-modal>

    <!-- 上传新版本 -->
    <new-model-version v-model:visible="showEdit33" :data="current" @done="reload" v-if="showEdit33" />
    <!-- 查看详情 -->
    <detail2-model v-model:visible="showEdit44" :data="current" :path="path" v-if="showEdit44" />
    <!-- 预览 -->
    <curr-version-preview v-model:visible="showEdit55" :data="current" @done="reload" v-if="showEdit55" />
    <!-- 编辑新版本 -->
    <edit-new-version-preview v-model:visible="showEdit66" :data="current" :id="currentID" @done="reload" v-if="showEdit66" />

    <a-drawer
      :width="600"
      title="日志信息"
      v-model:visible="logVisible"
      @close="handleCancel"

    >
      <div style="height: 100%;">
        <a-textarea placeholder="Please enter something" v-model:value="currRecordLog" readonly="readonly" style="height: 100%;"/>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { WEB_VIEWER_URL_BASE } from '/@/config/settings';
  import { reactive, ref, watch, onMounted } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { ModelMgmtApi } from '/@/api/datadigital/modelMgmt/ModelMgmtApi';
  import NewModelVersion from '../new/index.vue';
  import Detail2Model from '../detail2/index.vue';
  import CurrVersionPreview from '../../preview/view/index.vue';
  import EditNewVersionPreview from '../../preview/edit/index.vue';
  // import { message } from 'ant-design-vue';
  // import * as options from '/@/utils/options';
  // 查询条件
  const where = reactive({
    // modelId: options.getUrlParam('id'),
    modelId: '',
  });

  const props = defineProps<{
    // 弹窗是否打开
    visible: Boolean;
    // 修改回显的数据
    data?: Object;
  }>();

  const emits = defineEmits<{
    (e: 'update:visible', visible: boolean): void;
    (e: 'done'): void;
  }>();

  const state = reactive({
    form: {},
  });

  // ref
  const formRef = ref(null);

  const updateVisible = (value: boolean) => {
    emits('update:visible', value);
  };

  // 初始化
  const init = () => {
    if (props.data) {
      state.form = Object.assign({}, props.data);
      where.modelId = state.form.id;
    } else {
      state.form = {};
      where.modelId = '-1';
    }
    if (formRef.value && formRef.value.$refs.formRef) {
      formRef.value.$refs.formRef.clearValidate();
    }
  };

  onMounted(() => {
    init();
  });

  watch(
    () => props.data,
    (val) => {
      init();
    },
  );

  // 多选选中列表
  const checkedKeys = ref<Array<string | number>>([]);
  // 当前行数据
  const current = ref<any>(null);
  // 当前行数据ID
  const currentID = ref<any>(null);
  // 当前行path
  const path = ref<any>(null);
  // 是否显示上传新版本
  const showEdit33 = ref<boolean>(false);
  // 查看详情2
  const showEdit44 = ref<boolean>(false);
  // 预览
  const showEdit55 = ref<boolean>(false);
  // 编辑新版本
  const showEdit66 = ref<boolean>(false);
  // 表格配置
  const columns = ref<string[]>([
    {
      title: '版本',
      dataIndex: 'version',
      width: 80,
    },
    {
      title: '缩略图预览',
      dataIndex: 'thumbnailPreview',
      width: 180,
    },
    {
      title: '描述',
      dataIndex: 'remark',
      width: 160,
    },
    {
      title: '作者',
      dataIndex: 'author',
      width: 160,
    },
    {
      title: '原始大小(入口文件)',
      dataIndex: 'fileSizeRet',
      width: 160,
    },
    {
      title: '轻量化大小',
      dataIndex: 'lightWeightSizeRet',
      width: 110,
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      width: 160,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 200,
      align: 'left',
    },
  ]);

  // ref
  const tableRef = ref(null);

  const reload = () => {
    checkedKeys.value = [];
    tableRef.value.reload({ page: 1 });
  };

  // 表格选中改变
  const onSelectChange = (selectedRowKeys: (string | number)[]) => {
    checkedKeys.value = selectedRowKeys;
  };

  const onNew2 = () => {
    // router.push({ path: `/model/manage/new`, query: { id } });
    setTimeout(() => {
      current.value = where.modelId;
      showEdit33.value = true;
    }, 0);
  };

  const onDetail2 = (row: any) => {
    current.value = row.id;
    path.value = row.path;
    showEdit44.value = true;
  };

  const onPreview = async (row: any) => {
    current.value = row.path;
    showEdit55.value = true;
  };

  const onEditNewVersionPreview = async (row: any) => {
    current.value = row.path;
    currentID.value = row.id;
    showEdit66.value = true;
  };

  const logVisible = ref(false);
  let currRecordLog = ref<any>();
  const handleClick = (id: string) => {
    ModelMgmtApi.getDetail2({ id: id as string }).then((res) => {
      currRecordLog = res.data.log;

      logVisible.value = true;
    });

  };
  const handleOk = () => {
    logVisible.value = false;
  };
  const handleCancel = () => {
    logVisible.value = false;
  }
</script>
<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
</style>
